<template>
  <div class="meritPay">
        <!-- 动态表单 -->
        <dynamic-form :formDataList='formDataList' @getFormData='getFormData'></dynamic-form>

        <!-- 按钮操作 -->
        <custom-setbtn>
            <template #l_btn>
                <div class="l_btn">
                    <el-button type="primary" size="mini" icon="el-icon-circle-plus-outline"
                        @click="createProduction">创建绩效工资配置</el-button>
                    
                    <el-popover placement="bottom" trigger="click" popper-class='batchPoper'>
                        <div class='operateBtn'>
                            <el-button type="text" size="mini" icon="el-icon-delete" @click='batchDel'>批量删除</el-button>
                        </div>
                        <el-button type="primary" size="mini" icon="el-icon-s-operation" :disabled='disabled'
                            slot="reference" style='margin:0 10px'>批量操作
                        </el-button>
                    </el-popover>
                   
                    <el-button type="primary" size="mini" icon="el-icon-download" plain @click='importModel'>导入</el-button>
                    <el-button type="primary" size="mini" icon="el-icon-upload2" plain @click='getWagesExport'
                        :disabled="tableList.length <= 0">导出</el-button>
                    
                    <el-button plain size="mini"
                        @click="delAll">全部删除</el-button>
                   
                    <el-button type="text" size="mini" icon="el-icon-document"
                        @click="viewImportLog">查看导入日志</el-button>
                    
                    <el-button type="text" size="mini" icon="el-icon-paperclip"
                        @click="matchingRules">绩效工资匹配规则</el-button>
                   
                </div>
            </template>
            <template #r_btn>
                <div class="r_btn">
                   <!-- 列配置表格 -->
                    <pop-checkbox :disposeGroup='disposeGroup' @handleChangeDiposeGroup='handleChangeDiposeGroup'>
                    </pop-checkbox>
                </div>
            </template>
        </custom-setbtn>

        <!-- 表格 -->
        <tableList
            :tableGroup='tableGroup'
            :tableList='tableList'
            :menu='menu'
            :searchForm='formDataList.searchForm'
            @tableListChecked='tableListChecked'
            @getTableData='getTableData'
            @delTableData='delTableData'
            ref='tableList'
        ></tableList>

        <!-- 批量删除 -->
        <el-dialog
            :visible.sync="batchDelVisible"
            width="416px"
            :show-close='false'>
            <span style="display:flex">
                <span
                    class='el-icon-warning-outline'
                    style="color:#faad14;font-size:22px;margin-right:10px"
                ></span>
                删除后数据无法恢复，确定删除吗?
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="batchDelVisible = false">取 消</el-button>
                <el-button type="primary" @click="getBaseDel">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 导入 -->
        <import-mould title='绩效工资配置' ref='importMould' @importSuccess="importSuccess"></import-mould>
  </div>
</template>

<script>
import dynamicForm from '@/components/dynamicForm'
import tableList from '../components/tableList'
import fileDownload from "js-file-download";
import {
    wagesList,
    wagesDel,
    wagesExport,
    baseDel,
    respShow
} from '@/api/baseController'
import { productColumns } from '@/api/customFieldController'
export default {
    components: {
        dynamicForm,
        tableList
    },
    data() {
        return {
            name: 'form',
            disabled: true,
            // 表单项
            formDataList: {
                formGroup: [],
                searchForm: {
                    limit: 10,
                    page: 1,
                    params: {}
                },
                formSet: false,
                // type: 'meritPay'
            },
            batchDelVisible: false,
            disposeGroup: [],
            tableGroup: [],
            tableList: [],
            // 当前页
            menu: '绩效工资配置',
            deleteAll: false
        }
    },
    mounted() {
        this.getRespShow()
        this.getProductColumns({type: 'wages'})
            .then(()=>{
                this.getTableData(this.formDataList.searchForm)
            })
    },
    methods: {
        // 查询条件
        getRespShow() {
            this.formDataList.formGroup = []
            respShow().then(res => {
                if(res.code == 200) {
                    let dataArr = []
                    res.data.map(item => {
                        if(item.customFieldMess != null) {
                            dataArr.push(item)
                        }
                        if(item.cusField == 'pricing') {
                            this.formDataList.formGroup.push({
                                label: 'pricing',
                                name: '计价方式',
                                prop: '',
                                placeholder: '请选择',
                                key: 'sel',
                                node: {
                                    isRadio: true,
                                    default: '',
                                    options: [
                                        { value: '0', label: '计件' },
                                        { value: '1', label: '计时' }
                                    ]
                                }
                            })
                        } else if(item.cusField == Number(item.cusField)) {
                            let data = JSON.parse(item.customFieldMess.checkBox).map(k => {
                                return {
                                    value: k.value,
                                    label: k.value
                                }
                            })
                            this.formDataList.formGroup.push({
                                label: item.cusField,
                                name: item.customFieldMess != null ? item.customFieldMess.chineseName : item.attribute,
                                prop: '',
                                placeholder: '请选择',
                                key: 'sel',
                                node: {
                                    isRadio: true,
                                    default: '',
                                    options:data,
                                    color: item.customFieldMess != null ? item.customFieldMess.checkBox : ""
                                }
                            })
                        } else {
                            this.formDataList.formGroup.push({
                                label: item.cusField,
                                name: item.customFieldMess != null ? item.customFieldMess.chineseName : item.attribute,
                                prop: '',
                                placeholder: '请输入',
                                key: 'srk'
                            })
                        }
                    })
                    this.$refs.tableList.respShowData(dataArr)
                }
            })
        },
        getProductColumns: async function(data){
            const res = await productColumns(data)
            if (res.code == 200) {
                this.disposeGroup = []
                this.tableGroup = []
                res.data.map((item, i) => {
                    const key = {
                        index:'80',
                        unitPrice:'80',
                        output:'80',
                        workingHours:'80',
                        createTime:'145',
                        createName:'70',
                        updateTime:'145',
                        processName:'130',
                        pricing:'80'
                    }
                    let width = key[item.name] ?? '180'
                    if (item.state) {
                        this.tableGroup.push({
                            label: item.name,
                            name: item.chineseName,
                            width
                        })
                    }
                    this.disposeGroup.push({
                        label: item.name,
                        name: item.chineseName,
                        state: item.state
                    })
                })
            }
        },
        //监视复选框值变化
        handleChangeDiposeGroup(disposeGroup) {
            let configureList = []
            configureList = disposeGroup.map(i => {
                return {
                    name: i.label,
                    chineseName: i.name,
                    state: i.state
                }
            })
            this.getProductColumns({
                type: 'wages',
                configureList
            }).then(()=>{
                this.$refs.tableList.changeLayout() //防止改变table列配置出现抖动
            })
        },
        // 表格数据
        getTableData(data) {
            this.$refs.tableList.onloadLogin(true)
            this.deleteAll = false
            let obj = {
                limit: data.limit,
                page: data.page,
                params: {}
            }
            for(let key in data) {
                if(key != 'limit' && key != 'page' && data[key] != "" && key != 'params') {
                    obj.params[key] = data[key]
                }
            }
            wagesList(obj).then(res => {
                this.$refs.tableList.onloadLogin(false)
                if(res.code == 200) {
                    this.tableList = res.data.list;
                    this.tableList.map((item, i) => {
                        item.index = (res.data.pageNum - 1) * 10 + (i + 1)
                        for(let key in item.map) {
                            item[key] = item.map[key]
                        }
                    })
                    this.$refs.tableList.totalNum(res.data.total)
                }
            })
        },
        // 表格数据删除
        delTableData(data, page) {
            wagesDel(data).then(res => {
                if(res.code == 200) {
                    if(res.data == 'success') {
                        this.utils.showMsg('删除成功', 'success')
                    } else {
                        this.utils.showMsg(res.data, 'error')
                    }
                    this.formDataList.searchForm.page = page
                    this.getTableData(this.formDataList.searchForm)
                }
            })
        },

        // 查看导入日志
        viewImportLog() {
            this.$router.push({
                path: '/basicData/meritPay/loadLog',
                query: {
                    name: '绩效工资配置'
                }
            })
        },
        // 删除全部
        delAll() {
            this.batchDelVisible = true
            this.deleteAll = true
        },
        // 批量删除
        batchDel() {
            this.batchDelVisible = true
            this.deleteAll = false
        },
        getBaseDel() {
            let data = {
                type: 5,
                ids: this.batchDelData
            }
            if(this.deleteAll) { data.ids = -1 }
            this.batchDelVisible = false
            baseDel(data).then(res => {
                if(res.code == 200) {
                    if(this.deleteAll) {
                        this.utils.showMsg('删除成功', 'success')
                    } else {
                        let str = res.data.substring(res.data.indexOf('败'))
                        let n = str.substring(2, str.length - 2)
                        if(n == 0) {
                            this.utils.showMsg(res.data, 'success')
                        } else {
                            this.utils.showMsg(res.data, 'error')
                        }
                    }
                    this.getTableData(this.formDataList.searchForm)
                    this.$refs.tableList.clearSel()
                }
            })
        },
        // 绩效工资匹配规则
        matchingRules() {
            this.$router.push({
                path: '/basicData/meritPay/matchingRules',
                query: {
                    name: '绩效工资匹配规则'
                }
            })
        },
        // 创建绩效工资配置
        createProduction() {
            this.$router.push({
                path: '/basicData/meritPay/createMeritPayRules',
                query: {
                    name: '创建绩效工资配置'
                }
            })
        },
        // 表格内容勾选
        tableListChecked(arr, page) {
            this.formDataList.searchForm.page = page
            this.batchDelData = arr.join(',')
            if(arr.length > 0) {
                this.disabled = false
            } else {
                this.disabled = true
            }
        },
        //点击查询获取表单数据
        getFormData(val){
            val.page = 1
            this.formDataList.searchForm = val
            this.getTableData(val)
        },
        // 导入
        importModel() {
            let obj = {
                type: 'wages',
                importUrl: '/base/wages_import',
                isCover:false
            }
            this.$refs.importMould.openDialog(obj)
        },
        // 导入成功
        importSuccess() {
            this.getTableData(this.formDataList.searchForm)
        },
        // 导出
        getWagesExport() {
            this.$refs.tableList.getTableData('绩效工资' + new Date().dateFormat('yyyyMMddhhmmss'), '/base/wages_list', '1',this.formDataList.searchForm)
            // wagesExport({}).then(res => {
            //     fileDownload(res, '绩效工资配置' + new Date().dateFormat('yyyyMMddhhmmss') + '.xlsx', 
            //         'application/vnd.ms-excel;charset=UTF-8')
            // })
        },
    }
}
</script>

<style lang="less" scoped>
.meritPay {
    overflow: auto;
}
</style>